<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-text="age"></p> 
			<input type="text" v-model="age">
		</div>
	<script>
		// new Vue(options)选项
		 var options = {
			 data:{age:15}
		 }
		 // vue的实例
		 var vm = {};
		 // 获取到input和p
		 var inp  = document.querySelector("[v-model='age']");
		 var p = document.querySelector("[v-text='age']");
		 //劫持vm对象的age属性
		 Object.defineProperty(vm,"age",{
			 // configurable :true是否能删除
			 // enumerable：true，是否可以枚举
			 get(){
				 // 返回options的data的age
				 return options.data.age;
			 },
			 set(v){
				 // 设置options data 的age
				 // 更新options.data
				 options.data.age = v;
				 // 更新订阅的节点文本
				 p.innerText = v;
				 // 更新订阅的节点的值
				 inp.value = v;
				 // 初始化监听
				 inp.addEventListener("input",inputHd);
			 }
		 })
		 function inputHd(e){
			 // 更新age的值，触发set方法 也就会更新节点值
			 vm.age = e.target.value;
		 }
		 // 初始化（触发set方法）
		 vm.age = options.data.age;
	</script>
	</body>
</html>
